<script setup lang="ts">
{{#if (eq api "orpc")}}
import { useQuery } from '@tanstack/vue-query'
{{/if}}
const {$authClient} = useNuxtApp()

definePageMeta({
  middleware: ['auth']
})

const { $orpc } = useNuxtApp()

const session = $authClient.useSession()
{{#if (eq payments "polar")}}
const customerState = ref<any>(null)
{{/if}}

{{#if (eq api "orpc")}}
const privateData = useQuery({
  ...$orpc.privateData.queryOptions(),
  enabled: computed(() => !!session.value?.data?.user)
})
{{/if}}

{{#if (eq payments "polar")}}
onMounted(async () => {
  if (session.value?.data) {
    const { data } = await $authClient.customer.state()
    customerState.value = data
  }
})

const hasProSubscription = computed(() => 
  customerState.value?.activeSubscriptions?.length! > 0
)
{{/if}}

</script>

<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Dashboard</h1>
    <div v-if="session?.data?.user">
        <p class="mb-2">Welcome \{{ session.data.user.name }}</p>
    </div>
    {{#if (eq api "orpc")}}
    <div v-if="privateData.status.value === 'pending'">Loading private data...</div>
    <div v-else-if="privateData.status.value === 'error'">Error loading private data: \{{ privateData.error.value?.message }}</div>
    <p v-else-if="privateData.data.value">API: \{{ privateData.data.value.message }}</p>
    {{/if}}
    {{#if (eq payments "polar")}}
    <p class="mb-2">Plan: \{{ hasProSubscription ? "Pro" : "Free" }}</p>
    <UButton 
      v-if="hasProSubscription"
      @click="() => { $authClient.customer.portal() }"
    >
      Manage Subscription
    </UButton>
    <UButton 
      v-else
      @click="() => { $authClient.checkout({ slug: 'pro' }) }"
    >
      Upgrade to Pro
    </UButton>
    {{/if}}
  </div>
</template>
